﻿@model LayoutWidgetsViewModel
@{
	ViewBag.Title = String.Format("Configure widgets for page layout '{0}'", Model.PageLayout.Name);
}
@Cms.ScriptInclude("Themes/Admin/Scripts/tiny_mce/tiny_mce.js")
@Cms.ScriptInclude("Themes/Admin/Scripts/tiny_mce/jquery.tinymce.js")
@Cms.ScriptInclude("Themes/Admin/Scripts/tiny_mce/cms.tinymce.js")

@section sidebar {
	<h3>Available widgets</h3>
	<p><em>Drag a widget to a content region to add it to that content region.</em></p>
	<ul id="availablewidgets">
		@foreach (var widgetType in Model.AvailableWidgetTypes) {
			<li class="widget draggable newwidget" data-widgetname="@widgetType.Name">
				<div class="widget-head">
					<span title="@widgetType.Description"><strong>@widgetType.Name</strong></span>
				</div>
				<div class="widget-edit" style="display:none"></div>
				<div class="widget-buttons" style="display: none">
					<input type="button" value="Save" disabled="disabled" />
					@using (Html.BeginForm("DeleteWidget", "Layouts", new {id = Model.PageLayout.Id}, FormMethod.Post, new {@class = "inline"}))
					{
						<input type="hidden" name="widgetid" />
						@Html.AntiForgeryToken()
						<a href="#" class="cmd deletelink">Delete</a>
					}
				</div>
			</li>
		}
	</ul>
}

<h2>@ViewBag.Title</h2>

<ul id="contentregions">
	@foreach (var contentRegion in Model.ContentRegions) {
		<li data-contentregion="@contentRegion">
			<h3><a href="#@contentRegion" class="closed">@contentRegion</a></h3>
			<ul class="widgetzone" style="display:none;min-height:20px">
				@if (Model.PageLayout.Widgets.ContainsKey(contentRegion))
				{
					foreach (var widgetId in Model.PageLayout.Widgets[contentRegion]) {
						<li class="widget" id="@widgetId">
							<div class="widget-head">
								<span><strong>@Model.WidgedTypesByWidgetId[widgetId]</strong></span>
							</div>
							<div class="widget-edit" style="display:none"></div>
							<div class="widget-buttons" style="display: none">
								<input type="button" value="Save" disabled="disabled" />
								@using (Html.BeginForm("DeleteWidget", "Layouts", new {id = Model.PageLayout.Id}, FormMethod.Post, new {@class = "inline"}))
								{
									<input type="hidden" name="widgetid" value="@widgetId"/>
									@Html.AntiForgeryToken()
									<a href="#" class="cmd deletelink">Delete</a>
								}
							</div>
						</li>	
					}
				}
			</ul>
		</li>
	} 
</ul>

<p>
	@Html.ActionLink("Back to layouts", "Index")
</p>

<script type="text/javascript">
	var droppedWidget;
	
	$(document).ready(function () {
		$('#contentregions a.closed').click(function () {
			$(this).toggleClass("open");
			$(this).parent().next().toggle();
			return false;
		});

		$('#contentregions a.closed').each(function () {
			if ($(this).parent().next().children().length > 0) {
				$(this).triggerHandler("click");
			}
		});

		$('ul.widgetzone .widget-head').live("click", function () {
			var editArea = $(this).next();
			editArea.toggle().next().toggle();
			if (editArea.children().length == 0) {
				var widgetId = $(this).parent().find('input[name=widgetid]').val();
				loadEditor(widgetId, editArea);
			}
		});

		$('ul.widgetzone').sortable({
			revert: true,
			stop: function (ev, ui) {
				var contentRegion = $(this).parent().data("contentregion");
				var layoutId = "@Model.PageLayout.Id";
				if (ui.item.hasClass("newwidget")) {
					// Add widget
					var widgetName = ui.item.data("widgetname");
					$.ajax({
						type: "POST",
						url: "@Url.Action("CreateWidget", "Layouts")",
						data: { id: layoutId, widgetName: widgetName, contentRegion: contentRegion },
						success: function(data) {
							var editArea = ui.item.find('.widget-edit');
							editArea.toggle().next().toggle();
							ui.item.find('input[name=widgetid]').val(data.Id);
							ui.item.css('cursor', 'auto');
							ui.item.removeClass("newwidget");
							loadEditor(data.Id, editArea);
						}
					});
				}
				else {
					var sortedWidgetIds = $(this).sortable("toArray");
					$.ajax({
						type: 'POST',
						url: '@Url.Action("SortWidgets", "Layouts")',
						data: { layoutId: layoutId, contentRegion: contentRegion, sortedWidgetIds: sortedWidgetIds },
						dataType: 'json',
						traditional: true
					});
				}
			}
		});
		
		$('#availablewidgets > li.widget').draggable({
			revert: "invalid",
			helper: "clone",
			connectToSortable: "ul.widgetzone"
		});
	});
	
	function loadEditor(widgetId, editArea) {
		$.ajax({
			type: "GET",
			url: "@Url.Action("Edit", "Widgets")",
			data: { widgetid: widgetId },
			success: function(data) {
				editArea.append(data);
				var $form = editArea.children('form');
				$.validator.unobtrusive.parse($form);
				editArea.next().children('input[type=button]').removeAttr('disabled').click(function() {
					if ($form.valid()) {
						$.ajax({
							type: 'POST',
							data: $form.serialize(),
							url: $form.attr('action'),
							success: function(data) {
								// Do something with data?
							}
						});
					}
					return false;					
				});
				$(document).trigger('widgetloaded');
			}
		});
	}
</script>
